<template>
  <div class="bpmn-right">
    <HTabs
      style="padding-left: 10px"
      @change="changeTab"
      v-model:active="tabSiderType"
      :dataSource="tabList"
    />
    <BaseSettings @change-type="handleChangeTab" :tabType="tabType" v-show="tabSiderType === 1" />
    <Recipient :tabType="tabType" v-show="tabSiderType === 2 && isNodeItem" />
    <ConditionSetting
      :tabType="tabType"
      :tabSiderType="tabSiderType"
      v-show="tabSiderType === 3 && isNodeItem"
    />
    <DealContent :tabSiderType="tabSiderType" v-show="tabSiderType === 4 && isNodeItem" />
  </div>
</template>
<script lang="ts" setup name="BpmnRight">
  import BaseSettings from './base_settings/BaseSettings.vue';
  import Recipient from './recipient/index.vue';
  import DealContent from './deal_content/index.vue';
  import { ref, watch, onMounted, computed } from 'vue';
  import { HTabs } from '/@/components/HTabs';
  import modelerStore from '/@/store/modules/bpmnModeler';
  import ConditionSetting from './Condition/index.vue';

  defineProps({
    tabType: Number,
  });
  const modeler = modelerStore();
  const nodeItem = computed(() => modeler.nodeItem);
  const isNodeItem = ref(false);
  const tabSiderType = ref(1);
  const tabList = ref([{ label: '基础设置', value: 1, barOffset: 34 }]);
  const bpmnId = ref('');
  watch(
    () => nodeItem.value,
    (val: Indexable | null) => {
      if (val) {
        if (val.bpmnId === bpmnId.value) return;
        bpmnId.value = val.bpmnId;

        isNodeItem.value = true;
        if (val.activityType === -1) {
          tabList.value = [{ label: '基础设置', value: 1, barOffset: 0 }];
          tabSiderType.value = 1;
        } else if (val.bpmnId.indexOf('end') > -1) {
          tabList.value = [
            { label: '基础设置', value: 1, barOffset: 0 },
            { label: '条件设置', value: 3, barOffset: 0 },
          ];
          tabSiderType.value = 1;
        } else {
          tabList.value = [
            { label: '基础设置', value: 1, barOffset: 0 },
            { label: '收件人设置', value: 2, barOffset: 0 },
            { label: '条件设置', value: 3, barOffset: 0 },
            { label: '消息处理', value: 4, barOffset: 0 },
          ];
        }
      } else {
        isNodeItem.value = false;
        bpmnId.value = '';
        tabList.value = [{ label: '基础设置', value: 1, barOffset: 0 }];
        tabSiderType.value = 1;
      }
    },
    { deep: true, immediate: false },
  );
  onMounted(() => {
    tabList.value[0].barOffset = 34;
  });

  function handleChangeTab(val) {
    tabSiderType.value = val;
  }
  function changeTab() {
    tabList.value[0].barOffset = 0;
  }
</script>
<style lang="less" scoped>
  :deep(.h-tabs-bar) {
    left: 19px;
  }

  .bpmn-right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 104;
    width: 392px;
    height: 100%;
    background-color: #fff;
    //box-shadow: -4px 0px 12px 0px rgba(0, 0, 0, 0.12);

    border-left: 1px solid #e9e9e9;

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: -12px;
      height: 100%;
      top: 48px;
      width: 12px;
      background: rgb(240, 242, 245);
    }
  }
</style>
